
<html>
<head>
    <meta charset='utf-8'>
    <title></title>
    <style type="text/css">
        *{font-size: 12px;}
        th{text-align: right;}
        ul { width: 250px; position: relative; } 
        li { border: 1px blue solid; list-style: none; text-align: center; position: absolute; cursor: pointer; }
    </style>
    <script type="text/javascript" src="jquery-1.8.2.js"></script>
    <script type="text/javascript">
        String.prototype.format = function () {
            if (arguments.length === 0) { return this; }
            for (var s = this, i = 0; i < arguments.length; i++) {
                s = s.replace(new RegExp("\\{" + i + "\\}", "g"), arguments[i]);
            }
            return s;
        };
        Array.prototype.remove = function (val) {
            var index = this.indexOf(val);
            if (index > -1) {
                this.splice(index, 1);
            }
        };
        function randomNumber(min, max) {
            return parseInt(Math.random() * (max - min) + min);
        }
        function getLocation(id) {
            var object = $('#{0}'.format(id));
            return [parseInt(object.css('left').replaceAll('px', '')), parseInt(object.css('top').replaceAll('px', ''))];
        }
        function slide(id, location) {
             $("#{0}".format(id)).animate({left: '{0}px'.format(location[0]), top: '{0}px'.format(location[1])});
        }
        $(function () {
            var locations = [];
            var tempIndex = 0;
            var widthNumber = 30;
            var rowNumber = 3;
            var columnNumber = 3;
            var sizeNumner = rowNumber * columnNumber;
            function initialize() {
                $('ul').remove()
                locations = [];
                tempIndex = 0;
                sizeNumner = rowNumber * columnNumber;
                var targetIndex = randomNumber(0, sizeNumner);
                var parentElement = document.createElement('ul');
                for (var i = 0; i < columnNumber; i++) {
                    for (var j = 0; j < rowNumber; j++) {
                        var top = i * widthNumber;
                        var left = j * widthNumber;
                        var liElement = document.createElement('li');
                        liElement.innerText = tempIndex;
                        liElement.id = tempIndex;
                        var styleString = 'top:{0}px;left:{1}px;'.format(top, left);
                        styleString += 'width:{0}px; height:{0}px; line-height:{0}px;'.format(widthNumber);
                        if (tempIndex === targetIndex) {
                            styleString += 'border:1px red solid;';
                        }
                        liElement.style = styleString;
                        locations.push([left, top])
                        parentElement.appendChild(liElement);
                        tempIndex++;
                    }
                }
                document.body.appendChild(parentElement);
                // setTimeout(function(){
                //     var targetElement = document.getElementById(targetIndex);
                //     for (var i=0;i<20;i++) {
                //         $(targetElement).fadeOut(100).fadeIn(100);
                //     }
                // }, 2000);
            }
            initialize();
            
            function start(isSort) {
                var [ ...tempLocations ] = locations;
                var newLocations = isSort ? tempLocations.sort(function() { return 0.5 - Math.random(); }) : tempLocations;
                for (var i=0; i<sizeNumner; i++) {
                    var location = newLocations[i];
                    slide(i, location);
                }
            }
            var timer = null;
            function timerFunction (need) {
                timer = setInterval(function () {
                    start(true);
                }, need);
            }
            document.getElementById('start').onclick = function () {
                if (timer != null) {
                    this.value = 'Start';
                    clearInterval(timer)
                    timer = null;
                } else {
                    this.value = 'Stop';
                    var needElement = document.getElementById('need');
                    if (!isNaN(needElement.value)) {
                        timerFunction(parseInt(needElement.value), false);
                    }
                    
                }
            }
            document.getElementById('reset').onclick = function () {
                if (timer != null) {
                    clearInterval(timer)
                    timer = null;
                }
                start(false);
            }
            document.getElementById('setting').onclick = function () {
                if (timer != null) {
                    document.getElementById('start').value = 'Start';
                    clearInterval(timer)
                    timer = null;
                }
                var rowElement = document.getElementById('row');
                var widthElement = document.getElementById('width');
                var columnElement = document.getElementById('column');
                if (isNaN(rowElement.value) || isNaN(columnElement.value) || isNaN(widthElement.value)) {
                    alert('错误的值')
                    return false;
                }
                widthNumber = parseInt(widthElement.value);
                if (widthNumber < 20) {
                    widthNumber = 20;
                    widthElement.value = widthNumber;
                }
                rowNumber = parseInt(rowElement.value);
                if (rowNumber < 2) {
                    rowNumber = 2;
                    rowElement.value = rowNumber;
                }
                columnNumber = parseInt(columnElement.value);
                if (columnNumber < 2) {
                    columnNumber = 2;
                    columnElement.value = columnNumber;
                }
                initialize();
            }

            // $('body').on('click', 'li', function () {
            //     var id = parseInt($(this).attr('id'));
            //     if (id === targetIndex) {
            //         alert('success');
            //     } else {
            //         alert('failed');
            //     }
            // });
            
        });
    </script>
</head>

<body>
    <table>
        <tr>
            <th>Width:</th>
            <td><input type="number" id="width" value="30" /></td>
        </tr>
        <tr>
            <th>Row:</th>
            <td><input type="number" id="row" value="3" /></td>
        </tr>
        <tr>
            <th>Column:</th>
            <td><input type="number" id="column" value="3" /></td>
        </tr>
        <tr>
            <th>Need:</th>
            <td><input type="number" id="need" value="500" /></td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="button" id="setting" value="Setting" />
                <input type="button" id="reset" value="Reset" />
                <input type="button" id="start" value="Start" />
            </td>
        </tr>
    </table>
</body>
</html>